<template>
  <div class="bottom-view" id="bottom-view">
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">关键词搜索</div>
        </template>
        <template #default>
          <div class="chart-wrapper">
            <div class="chart-inner">
              <div class="chart">
                <div class="chart-title">搜索用户数</div>
                <div class="chart-data">422,22</div>
                <div class="Becharts">
                  <v-chart :option="searchUserOption" />
                </div>
              </div>
              <div class="chart">
                <div class="chart-title">搜索量</div>
                <div class="chart-data">1321,3212</div>
                <div class="Becharts">
                  <v-chart :option="searchNumberOption" />
                </div>
              </div>
            </div>
            <div class="table-wrapper">
              <el-table :data="tableData">
                <el-table-column prop="rank" label="排名" />
                <el-table-column prop="keyword" label="关键词" />
                <el-table-column prop="count" label="总搜索量" />
                <el-table-column prop="users" label="搜索用户数" />
                <el-table-column prop="range" label="搜索占比" />
              </el-table>
              <el-pagination
                small
                background
                layout="prev, pager, next"
                :total="100"
                :page-size="4"
                @current-change="onPageChange"
              />
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">
            <div class="title">分类销售排行</div>
            <div class="radio-wrapper">
              <el-radio-group v-model="radioSelect" size="small">
                <el-radio-button label="品类"></el-radio-button>
                <el-radio-button label="商品"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </template>
        <template #default>
          <div class="chart-wrapper">
            <v-chart :option="categoryOption" />
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts/core";
import {
  BarSeriesOption,
  PieSeriesOption,
  LineSeriesOption,
} from "echarts/charts";
import {
  GridComponentOption,
  TitleComponentOption,
  TooltipComponentOption,
  LegendComponentOption,
} from "echarts/components";

//左1
type ECOption = echarts.ComposeOption<
  | GridComponentOption
  | TitleComponentOption
  | TooltipComponentOption
  | BarSeriesOption
  | PieSeriesOption
  | LineSeriesOption
  | LegendComponentOption
>;
const searchUserOption = ref<ECOption>({
  xAxis: {
    type: "category",
    boundaryGap: false,
  },
  yAxis: {
    show: false,
    min: 0,
    max: 300,
  },
  series: [
    {
      type: "line",
      data: [100, 150, 200, 250, 200, 100, 150, 200],
      areaStyle: {
        color: "rgba(95, 187, 255, .5)",
      },
      lineStyle: {
        color: "rgb(95, 187, 255)",
      },
      itemStyle: {
        opacity: 0,
      },
      smooth: true,
    },
  ],
  grid: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

//左2
const searchNumberOption = ref<ECOption>({
  xAxis: {
    type: "category",
  },
  yAxis: {
    show: false,
    min: 0,
    max: 300,
  },
  series: [
    {
      type: "line",
      data: [100, 150, 200, 250, 200, 100, 150, 200],
      areaStyle: {
        color: "rgba(95, 187, 255, .5)",
      },
      lineStyle: {
        color: "rgb(95, 187, 255)",
      },
      itemStyle: {
        opacity: 0,
      },
      smooth: true,
    },
  ],
  grid: {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

// table-data数据
interface TableData {
  id: number;
  rank: number;
  keyword: string;
  count: number;
  users: number;
  range: string;
}
const tableData = ref<TableData[]>([
  {
    id: 1,
    rank: 1,
    keyword: "北京",
    count: 100,
    users: 90,
    range: "90%",
  },
  {
    id: 2,
    rank: 2,
    keyword: "北京",
    count: 100,
    users: 90,
    range: "90%",
  },
  {
    id: 3,
    rank: 3,
    keyword: "北京",
    count: 100,
    users: 90,
    range: "90%",
  },
  {
    id: 4,
    rank: 4,
    keyword: "北京",
    count: 100,
    users: 90,
    range: "90%",
  },
]);
// 监听分页器数据
const onPageChange = (page: string) => {
  console.log(page);
};

// 右侧图标
const radioSelect = ref("品类");

type ECCategoryOption = echarts.ComposeOption<
  | GridComponentOption
  | TitleComponentOption
  | TooltipComponentOption
  | PieSeriesOption
  | LegendComponentOption
>;
let categoryOption = ref<ECCategoryOption>({});

//渲染饼状图

const renderPieChart = () => {
  const mockData = [
    {
      legendname: "粉面粥店",
      value: 67,
      percent: "15.40",
      name: "粉面粥店",
    },
    {
      legendname: "早茶",
      value: 167,
      percent: "65.40",
      name: "早茶",
    },
    {
      legendname: "饺子1",
      value: 22,
      percent: "21.15",
      name: "饺子",
      itemStyle: {
        color: "pink",
      },
    },
  ];

  categoryOption.value = {
    title: [
      {
        text: "品类分布",
        textStyle: {
          fontSize: 14,
          color: "#666",
        },
        left: 20,
        top: 20,
      },
      {
        text: "累计订单量",
        subtext: "320",
        left: "34.5%",
        top: "42.5%",
        textAlign: "center",
        textStyle: {
          fontSize: 14,
          color: "#999",
        },
        subtextStyle: {
          fontSize: 28,
          color: "#333",
        },
      },
    ],
    series: [
      {
        name: "品类分布",
        type: "pie",
        data: mockData,
        label: {
          show: true,
          position: "outer",
          formatter: `{b} | {d}%`,
        },
        center: ["35%", "50%"],
        radius: ["45%", "60%"],
        labelLine: {
          length: 6,
          length2: 4,
          smooth: true,
        },
        clockwise: false,
        itemStyle: {
          borderWidth: 4,
          borderColor: "#fff",
        },
      },
    ],
    legend: {
      type: "scroll",
      orient: "vertical",
      height: 250,
      left: "70%",
      top: "middle",
      textStyle: {
        color: "#8c8c8c",
      },
    },
    tooltip: {
      trigger: "item",
      // formatter: "{a} <br/>{'@[3]'} : {c} ({d}%)",
      formatter: function (params: any) {
        const str =
          params.seriesName +
          "<br />" +
          params.marker +
          params.data.name +
          "<br />" +
          "数量：" +
          params.data.value +
          "<br />" +
          "占比：" +
          params.data.percent +
          "%";
        return str;
      },
    },
  };
};
onMounted(() => {
  renderPieChart();
});
</script>

<style scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;
}

.bottom-view .view {
  flex: 1;
  width: 50%;
  box-sizing: border-box;
}

.bottom-view .view:first-child {
  padding: 0 10px 0 0;
}

.bottom-view .view:last-child {
  padding: 0 0 0 10px;
}

.bottom-view .view .title-wrapper {
  display: flex;
  align-items: center;
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  font-weight: 700;
  padding: 0 0 0 20px;
}

.bottom-view .view .title-wrapper .radio-wrapper {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

.bottom-view .view .chart-wrapper {
  display: flex;
  flex-direction: column;
  height: 452px;
}

.bottom-view .view .chart-wrapper .chart-inner {
  display: flex;
  padding: 0 10px;
  margin-top: 20px;
}

.bottom-view .view .chart-wrapper .chart-inner .chart {
  flex: 1;
  padding: 0 10px;
}
.Becharts {
  width: 100%;
  height: 82px;
}

.bottom-view .view .chart-wrapper .chart-inner .chart .chart-title {
  color: #999;
  font-size: 14px;
}

.bottom-view .view .chart-wrapper .chart-inner .chart .chart-data {
  font-size: 22px;
  color: #333;
  font-weight: 500;
  letter-spacing: 2px;
}

.bottom-view .view .chart-wrapper .table-wrapper {
  flex: 1;
  margin-top: 20px;
  padding: 0 20px 20px;
}

.bottom-view .view .chart-wrapper .table-wrapper .el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
